/*总框架*/
* {
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%;
}

body {
    background-color: #f5f5f5;
}

#main_container {
    display: flex;
    margin: 0 15%;
    padding: 20px;
    height: calc(100% - 2 * 10px - 2 * 20px); /*全屏减去上下padding*/
}

/*左侧框*/
#friends, #chat {
    height: 100%;
    padding: 15px;
}

#friends {
    color: #f4f4f4;
    background-color: #2e3238;
    flex-basis: 30%;
    overflow: auto;
}

.person-center {
    padding: 0 0 15px 5px;
}

#btn-exit {
    float: right;
}

#search-friend-input-box {
    display: flex;
}

#search-friend-input {
    padding: 0 10px;
    width: 60%;
    font-size: 9pt;
    color: #fff;
    height: 30px;
    line-height: 30px;
    border: 1px solid #3a3a3a;
    border-radius: 4px;
    outline: 0;
    background-color: #26292e;
    flex-grow: 1;
}

.new-msg {
    color: yellow;
}

.friend-item-ops {
    margin: 0 5px;
}

/*右侧框*/
#chat {
    background-color: #e8e8e8;
}

#chat, #chat-empty {
    background: url("../images/bg.jpg");
    background-size: cover;
    flex-basis: 70%;
    display: flex;
    flex-direction: column;
}

#chat-empty {
    border: solid 1px;
    height: calc(100% + 28px);
    background: url("../images/bg.jpg");
    background-size: cover;
}

#chat-title {
    padding: 10px;
}

#msg-list, #msg-editor {
    padding: 15px;
}

#msg-list {
    flex-basis: 70%;
    overflow-y: scroll;
}

/*消息编辑框*/
#msg-editor {
    /*background-color: #fff;*/
    flex-basis: 30%;
    display: flex;
    flex-direction: column;
}

#msg-editor-input {
    height: 100%;
    width: 100%;
    border: none;
    outline: 0;
    font-family: Micrsofot Yahei;
    resize: none;
}

#msg-editor-buttons {
    text-align: center;
    margin-top: 15px;
}

#btn-clear-msg {
    margin-right: 30%;
}

/*消息内容*/
.msg-item {
    margin: 5px 0;
    width: 100%;
}

.msg-item-sent {
    text-align: right;
}

.msg-item-sent .msg-content::after {
    content: " ";
    position: absolute;
    top: 9px;
    left: 100%;
    border: 7px solid transparent;
    border-left-color: #b2e281;
}

.msg-item-recv .msg-content::before {
    content: " ";
    position: absolute;
    top: 9px;
    right: 100%;
    border: 7px solid transparent;
    border-right-color: #b2e281;
}

.msg-content {
    display: inline-block;
    position: relative;
    padding: 0 10px;
    max-width: calc(100% - 40px);
    min-height: 30px;
    line-height: 2.5;
    font-size: 9pt;
    text-align: left;
    word-break: break-all;
    background-color: #b2e281;
    border-radius: 4px;
}

.friend-list li, .friend-list li a {
    padding: 9pt 15px;
    cursor: pointer;
    -webkit-transition: background-color .1s;
    border-bottom: 1px solid #292c33;
    transition: background-color .1s;
    list-style: none;
    text-decoration: none;
    color: white;
}

.friend-list li a {
    border-bottom: 0;
}

#delete-friend {
    color: red;
}

#change-memo-name {
    font-weight: bold;
}